<template>
	<view class="hotspot-page">
		<view class="hotspot-page-group clear">
			<uni-icons type="compose" size="16" class="icon-compose"></uni-icons>
			<text>清除未读</text>
		</view>
		<view class="hotspot-page-group list">
			<uni-list :border="false">
				<uni-list-item class="list-item" v-for="(v,i) in listData" :key="'list-item-' + i" :title="v.title"
					:note="handleTimeStrToTimeStamp(v.ts)" clickable
					@click.stop="goToPage('https://shuidianbang.net/web_app/article/' + v.id)">
					<template v-slot:footer>
						<image class="slot-image" src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/5c09f5c9-6fa8-4b4c-a975-49f8019c0d7e.jpg"></image>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import {
		publics
	} from '@/mixins/publics.js';
	
	import {
		getArticlesLocal,
	} from "@/utils/api"
	
	export default {
		mixins: [publics],
		data() {
			return {
				listData: []
			}
		},
		created() {
			this.getArticlesLocalApi()
		},
		methods: {
			// 本地热点 更多
			getArticlesLocalApi() {
				getArticlesLocal().then(res => {
					if (res.code === 200) {
						this.listData = res.data.docs;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.hotspot-page {
		height: 100%;
		background-color: #fff;

		&-group {
			&.clear {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 13px;
				color: #656565;
				letter-spacing: 0;
				padding: 10px 13.26px;

				.icon-compose {
					margin-right: 8.16px;
				}
			}

			&.list {
				height: calc(100% - 30px);
				overflow: auto;

				.slot-image {
					/* #ifndef APP-NVUE */
					display: block;
					/* #endif */
					margin-right: 10px;
					width: 110px;
					height: 77px;
					border-radius: 6px;
				}

				.list-item {
					.uni-list-item__container {
						padding: 10px 19px 10px 13px;
						font-family: PingFangSC-Regular;
						font-weight: 400;

						&-title {
							font-size: 17px;
							color: #1E1F23;
						}

						&-note {
							margin-top: 0;
							font-size: 12px;
							color: #969696;
						}
					}
				}
			}
		}
	}
</style>